<template>
  <div>
    <div class="first-tree">
      <span>章节列表</span>
    </div>
    <el-tree
      class="tree filter-tree"
      :data="data"
      :props="defaultProps"
      node-key="id"
      :expand-on-click-node="false"
      :default-expanded-keys="expandedIds"
      v-if="flag"
    >
      <span
        :class="['custom-tree-node', { active: activeId == data.id }]"
        slot-scope="{ node, data }"
      >
        <span
          v-show="data.planData && data.planData.hasOwnProperty('id')"
          class="el-icon-success color-success"
        ></span>

        <span
          class="label-name"
          :title="node.label"
          @click="handleNodeClick(data)"
        >
          {{ node | titleName }}</span
        >
      </span>
    </el-tree>
  </div>
</template>
<script>
import { sysCourseChapterQuery } from '@/api/admin/courseLibrary/sysCourseChapter.js'
export default {
  data() {
    return {
      defaultProps: {
        children: 'childList',
        label: 'name',
      },
      listQuery: {
        pid: 0,
        page: 1,
        limit: 9999,
        courseId: '', //课程ID
      },
      tableData: [],
      data: [],
      expandedIds: [],
      flag: false,
      activeId: '',
    }
  },
  props: ['curLessonPlan'],
  mounted() {
    this.getTree()
    this.$bus.$on('refreshLessonPlanList', (v) => {
      if (v) {
        Object.assign(this.listQuery, v)
      }
      this.getList()
    })
  },
  beforeDestroy() {
    this.$bus.$off('refreshLessonPlanList')
  },
  methods: {
    getTree() {
      this.listQuery.courseId =
        this.curLessonPlan.courseId || this.$route.query.courseId
      sysCourseChapterQuery(this.listQuery).then((res) => {
        this.data = res.data.data
        if (!this.data.length) return
        this.getList()
      })
    },
    handleNodeClick(data) {
      if (data.pid != 0) {
        let { id, planData } = data
        this.activeId = id
        this.$bus.$emit('showDialogLessonPlanAdd', planData)
      }
    },
    async getList() {
      this.flag = false
      let obj = {
        page: 1,
        limit: 99,
        lessonId: this.curLessonPlan.id,
      }
      let res = await this.$store.dispatch('queryEduLessonPlan', obj)
      this.tableData = res.data
      this.data.forEach((item, idx) => {
        item.index = idx
        item.childList.forEach((_item, index) => {
          _item.childList = []
          _item.index = index
          let planData = this.tableData.filter(
            (v) => v.chapterId == _item.id,
          )[0]
          this.$set(_item, 'planData', planData || { chapterId: _item.id })
          if (!this.activeId && idx == 0 && index == 0) {
            this.activeId = _item.id
            this.handleNodeClick(_item)
          }
        })
      })
      this.expandedIds = this.data.map((v) => v.id)
      this.flag = true
    },
  },
  filters: {
    titleName(data) {
      if (data.level == 1) {
        return '第' + (data.data.index + 1) + '章：' + data.label
      } else {
        return '第' + (data.data.index + 1) + '节：' + data.label
      }
    },
  },
}
</script>
<style scoped>
.aside {
  line-height: 26px;
  /* height: 740px; */
  text-align: left;
  font-size: 14px;
}
.aside::-webkit-scrollbar {
  display: none;
}
.custom-tree-node {
  border-bottom: 0 none;
  display: block;
  width: 300px;
}
.active {
  color: #930b0b;
}
.label-name {
  float: left;
  /* max-width: 65%; */
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btns {
  float: right;
  padding-right: 10px;
}
.aside >>> .el-tree-node__content {
  padding-bottom: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 1px dashed #eee;
}
.first-tree {
  height: 28px;
  padding: 14px 10px;
  line-height: 28px;
  border-bottom: 1px solid #eee;
}
.first-tree .add {
  float: right;
  margin-left: 10px;
}
.aside >>> .el-tree-node.is-current {
  background: #f5f7fa;
}
.el-tree-node__children .custom-tree-node {
  width: 280px;
}
</style>